<template>
    <h3>style绑定</h3>
    <div style="color: blue; font-size: 20px;">
        style属性的原始写法
    </div>
    <!-- 对象解构中：复杂的属性名用双引号/单引号表示为字符串 -->
    <!-- 对象解构中：属性值要么用纯数字，要么用字符串 -->
    <div v-bind:style="{color: 'blue', 'font-size': '20px'}">
        绑定style属性为一个对象
    </div>
    <div v-bind:style="{color: 'blue', 'font-size': fontSize + 'px'}">
        绑定style属性为一个对象
    </div>
    <div v-bind:style="styleObj">
        绑定style属性为一个响应式对象
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
const fontSize = ref(20)
const styleObj = reactive({
    'background-color': '#000000',
    'color': '#FF0000'
})
setTimeout(() => {
    // 为对象增加一个属性
    styleObj['font-size'] = '40px'
}, 3000)
</script>
<style scoped>
    
</style>